<template>
 <div>
   <selectPaginationTable
     isShowPagination
     v-model="value"
     :configure="configure"
     :list="list"
     :returnObj="true"
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
   ></selectPaginationTable>

   <!---->
   <br>
   <br>
   <br>
   <span>可以直接拿一个对象的select 框 </span>
   <el-select v-model="value2" @change="ch"  value-key="value">
     <el-option
       v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item">
     </el-option>
   </el-select>
 </div>
</template>

<script>
  import selectPaginationTable from './component/select-table/src';
  export default {
    components:{
      selectPaginationTable
    },
    data () {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value:"",
        value2: null, // 最终值
        configure: {
          columns: [
            { title: '物料编号', width: '149px', prop: 'code' },
            { title: '物料名称', width: '149px', prop: 'name' },
            { title: '规格', width: '149px', prop: 'spec' },
            { title: '单位', width: '110px', prop: 'unitName' },
          ],
          keywords: {
            label: 'name',
            value: 'id',
          },
          tablePagination: {
            total: 100, // 先这样
            currentPage: 1,
            pageSize: 10,
          }
        },
        list: [
          { id: 1, code: 1, name: '物料名称1', spec: '物料规格1', unitName: '吨' },
          { id: 2, code: 2, name: '物料名称2', spec: '物料规格2', unitName: '吨' },
          { id: 3, code: 3, name: '物料名称3', spec: '物料规格3', unitName: '吨' },
          { id: 4, code: 4, name: '物料名称4', spec: '物料规格4', unitName: '吨' },
          { id: 5, code: 5, name: '物料名称5', spec: '物料规格5', unitName: '吨' },
          { id: 6, code: 6, name: '物料名称6', spec: '物料规格6', unitName: '吨' },
          { id: 7, code: 7, name: '物料名称7', spec: '物料规格7', unitName: '吨' },
          { id: 8, code: 8, name: '物料名称8', spec: '物料规格8', unitName: '吨' },
          { id: 9, code: 9, name: '物料名称9', spec: '物料规格9', unitName: '吨' },
          { id: 10, code: 10, name: '物料名称10', spec: '物料规格10', unitName: '吨' },
          { id: 11, code: 11, name: '物料名称11', spec: '物料规格11', unitName: '吨' },
          { id: 12, code: 12, name: '物料名称12', spec: '物料规格12', unitName: '吨' },
          { id: 13, code: 13, name: '物料名称13', spec: '物料规格13', unitName: '吨' },
        ]
      }
    },
    methods: {
      handleSizeChange (val) {
        console.log('页面大小改变', val);
        // 调接口，为list赋值
      },
      handleCurrentChange (val) {
        console.log('页码改变', val);
        // 调接口，为list赋值
      },
      ch(val){
        console.log(val)
        console.log(this.value2)
      }
    },
    watch: {
      'value': {
        handler (val) {
          console.log('value的值:', val);
        }
      }
    },
  }
</script>

<style>
</style>
